import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'

export default class Xhl2 extends Component {

  config = {
    navigationBarTitleText: 'JSX 简介'
  }

  static defaultProps = {
    number: 10,
    showHeader: true
  }

  render() {
    let description

    if (this.props.number % 2 == 0) {
      description = <Text>even</Text>
    } else {
      description = <Text>odd</Text>
    }
    return (
      <View>
        <View>
          <View>必须声明 Taro 和组件</View>
          <View>{'import Taro, {Component} from "@tarojs/taro"'}</View>
          <View>{'import {Text, View} from "@tarojs/components"'}</View>
        </View>
        <View>
          <View>JSX 属性</View>
          <View>1. if 语句和 for 循环在 JavaScript 中不是表达式，因此它们不能直接在 JSX 中使用，所以你可以将它们放在周围的代码中。</View>
          <View>{this.props.number} is an {description} number</View>
          <View>2. React 可以使用 ... 拓展操作符来传递属性，但在 Taro 中你不能这么做。</View>
          <View>3. 布尔值、Null 和 Undefined 被忽略</View>
          <View>
            <Text /><Text></Text><Text>{false}</Text><Text>{null}</Text><Text>{undefined}</Text><Text>{true}</Text>
          </View>
          <View>4. 根据条件来确定是否渲染 元素时非常有用。</View>
          <View>
            {this.props.showHeader && <Text>Header被展示了</Text>}
          </View>
        </View>
      </View>
    )
  }
}
